<template>
  <div class="phoneContainer">
    <el-input
      prefix-icon="iphone"
      :disabled="disabled"
      v-model="phone"
      :placeholder="placeholder"
    />
    <div class="vericode" v-if="showCode">
      <el-input class="code" v-model="vericode" placeholder="请输入验证码" />
      <el-button class="get">获取验证码</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PhoneNumber',
  // model: {
  //   prop: "value",
  //   event: "changeValue",
  // },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    showCode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      phone: '',
      vericode: ''
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.phone = newVal
      },
      immediate: true
    },
    phone(newVal, oldVal) {
      this.$emit('update:modelValue', newVal)
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.phoneContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .vericode {
    width: 100%;
    display: flex;
    margin-top: 6px;

    .get {
      width: 150px;
      margin-left: 6px;
    }

    .code {
      flex: 1;
    }
  }
}
</style>
